Upgrade React to 17.0.2#306
Open
ankit0504 wants to merge 5 commits intoLanguage-Mapping:masterfrom
Open
Conversation
Replace react-scripts 3.4.1 with Vite 6 + @vitejs/plugin-react. This drops the NODE_OPTIONS=--openssl-legacy-provider workaround required for Node 17+ on CRA, and shrinks cold dev start to ~125ms and prod build to ~5s (from ~33s). Changes: - Swap scripts: yarn start -> vite; yarn build -> tsc --noEmit && vite build; yarn preview -> vite preview; drop eject/test. - Replace CRA deps with vite, @vitejs/plugin-react, vite-plugin-svgr, vite-tsconfig-paths. - Add vite.config.ts configuring the React and SVGR plugins, the REACT_APP_ env prefix (keeps .env working as-is, with VITE_ also accepted), port 3000, and build output to build/ (preserving the Netlify publish dir). - Move public/index.html to project root. Replace %PUBLIC_URL%/ with / and add the Vite module entry script. - Remove the CRA eslintConfig stanza in package.json; real config lives in .eslintrc. - Add a direct eslint@^7.32.0 devDep (previously hoisted by CRA), drop the react-app extends that no longer resolves, and remove the deleted serviceWorker.ts path from ignorePatterns. - Delete src/serviceWorker.ts and its import; it was already calling unregister() only, so removal is a no-op at runtime. - Rewrite six process.env.REACT_APP_* reads as import.meta.env. - Change Logo.tsx SVG import to use the vite-plugin-svgr ?react suffix. - Update tsconfig.json: target ES2020, add vite/client and vite-plugin-svgr/client types, exclude *.test.ts/tsx files from the build since there is no test runner anymore. - Delete src/setupTests.ts (orphaned CRA jest setup). Known follow-ups (deliberately out of scope for this PR): - @mapbox/mapbox-gl-geocoder imports the Node events module, which Vite externalizes for the browser. If the geocoder search breaks at runtime, it can be addressed by swapping react-map-gl-geocoder for a direct mapbox-gl-geocoder integration in a later phase. - yarn lint surfaces 55 pre-existing errors across the codebase that were previously masked by CRA's react-app eslint preset. These are unrelated to the build migration and should be addressed in a follow-up. Pre-commit lint-staged only runs against staged files, so new commits are unaffected.
Removing react-scripts in the previous commit unmasked pre-existing
eslint errors that CRA's react-app preset had been silencing.
Cleanup by category:
- 40 @typescript-eslint/no-unused-vars: set { args: "none" } in the
rule config. These were all unused callback parameters (mostly
createStyles theme args and event/props args in handlers) required
by library type signatures. The project-level policy is to not
enforce unused function arguments; genuine unused variables and
imports are still checked.
- 5 @typescript-eslint/no-use-before-define: reorder the five helper
function definitions so each precedes its call site. Affected:
createLayerStyles (hooks.points.ts), handleClose (SplitCrumbs.tsx),
scrollToTop (ResultsTable.tsx), clearFiltersBtnClick
(ResultsToolbar.tsx), excludeUTFtext (exporting.ts).
- 6 jsx-a11y/anchor-is-valid: five MUI <Link> usages that are
semantically buttons now use component="button" and drop the dummy
href="#" plus its e.preventDefault() plumbing. The sixth
(MapOptionsMenu) already uses component={Button}. All six get an
eslint-disable-next-line comment because the rule inspects JSX
element names and doesn't analyze MUI's component prop -- the
markup is correct, the rule is a false positive.
- 3 parser errors in excluded test files: add src/**/*.test.ts(x) to
.eslintrc ignorePatterns. The tsconfig already excludes these from
the build.
8 tasks
The airtable package references process.env at runtime, which webpack/CRA provided but Vite does not. Defining an empty object prevents the ReferenceError without leaking server-side env vars. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ankit0504
force-pushed
the
agupta/upgrade-phase-3-react-17
branch
from
f256435 to
dc3d406
Compare
- Rename vite.config.ts to vite.config.mts for ESM compatibility - Replace MUI Link-as-button with Button in 6 components - Pass Airtable API key explicitly instead of relying on process.env - Migrate remaining process.env reference to import.meta.env Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Bump react/react-dom to 17.0.2 and @types/react/@types/react-dom to the latest 17.x. Also bump @types/react-router-dom to 5.3.3 (5.1.5 was typed against React 16 and triggered TS2786 'cannot be used as a JSX component' errors for RouterLink passed to MUI component props). Add @types/react and @types/react-dom to the resolutions field so that transitively-installed type packages (eight of them — MUI, react-map-gl, react-swipeable-views, etc. all vendored their own @types/react@16) do not conflict with the top-level version. Without this, tsc sees multiple React type identities and cannot reconcile JSX element returns across package boundaries. React 17 has no API surface changes that affect this project, so no component code changes are required. React 18 is intentionally deferred to a later phase, after MUI v5 lands — react-swipeable-views is archived and breaks in React 18 StrictMode, and MUI v4 has React 18 peer-dep conflicts. Known-ignorable peer-dep warnings on install: react-query@2, react-share@4, react-swipeable-views, react-window, and react-router-dom all still declare React 16 as their max in their peer range, but each of them works with React 17 in practice.
ankit0504
force-pushed
the
agupta/upgrade-phase-3-react-17
branch
from
dc3d406 to
f509fd6
Compare
This was referenced Apr 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issues resolved by this pull request
None — phase 3 of the staged upgrade. Sets up the eventual React 18 move without forcing compatibility work against libraries (MUI v4, `react-swipeable-views`) that will be replaced in later phases.
Prerequisites
Review type
What's in this PR
Why not React 18 in this PR
React 18 conflicts with libraries slated for replacement in phase 4:
Landing React 17 first keeps this PR truly trivial (2 files) and de-risks the React 18 step by letting it follow MUI v5.
What to review
Verification done locally
Known-ignorable peer-dep warnings on install
Expected; each of these works with React 17 in practice despite declaring React 16 as their max:
`react-query@2`, `react-share@4`, `react-swipeable-views`, `react-window`, `react-router-dom > mini-create-react-context`.
What's next